<template>
  <div>
    <div class="comment">
      <h2>评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <img :src="attachImageUrl(avator)">
        </div>
        <el-input class="comment-input" type="textarea" :row="2" placeholder="请输入内容" v-model="textarea"></el-input>
      </div>
      <el-button type="primary" class="sub-btn" @click="postComment">评论</el-button>
    </div>
    <p>精彩评论：共{{commentList.length}}条评论</p>
      <ul class="popular" v-for="(item,index) in commentList" :key="index">
        <li>
          <div class="popular-img">
            <img :src="attachImageUrl(userPic[index])">
          </div>
          <div class="popular-msg">
            <ul class="ul">
              <li class="name">{{userName[index]}}</li>
              <li class="time">{{item.createTime}}</li>
              <li class="content">{{item.content}}</li>
            </ul>
          </div>
          <div class="up" ref="up" @click="postUp(item.id,item.up,index)">
            <svg class="icon">
                <use xlink:href="#icon-zan"></use>
            </svg>
            {{item.up}}
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
import {mixin} from '../mixins';
import {mapGetters} from 'vuex';
import {setComment,setLike,getAllComment,getUserOfId} from '@/api/index'
export default {
    name: '',
    mixins: [mixin],
    components: {},
    props: [
      'playId',       // 歌曲 或 歌单id
      'type'          // 0歌曲、1歌单
    ],
    data () {
      return {
        textarea: '',       // 存放输入的评论内容
        commentList: [],    // 存放评论列表
        userPic: [],        // 用户的头像
        userName: [],       // 用户的昵称
      }
    },
    computed: {
      ...mapGetters([
        'id',               // 歌曲 或 歌单id
        'loginIn',          // 用户是否已登录
        'userId',           // 当前登录用户id
        'avator',           // 当前登录用户头像
      ])
    },
    watch: {},
    created () {},
    mounted() {
      this.getComment();
    },
    methods: {
      // 获取用户头像和昵称
      getUsers(id) {
        getUserOfId(id)
        .then(res => {
          this.userPic.push(res.avator);
          this.userName.push(res.username);
        })
        .catch(err => {
          console.log(err);
        })
      },

      //提交评论
      postComment(){
        if(this.loginIn){
          let params = new URLSearchParams();
          if(this.type == 0){
            params.append('songId',this.playId);
          }else{
            params.append('songListId',this.playId);
          }
          params.append('userId',this.userId);
          params.append('type',this.type);
          params.append('content',this.textarea);
          setComment(params)
            .then(res => {
              if(res.code == 1){
                this.notify('评论成功','success');
                this.textarea='';
                this.getComment();
              }else{
                  this.notify('评论失败','error');
              }
            })
            .catch(err =>{
              this.notify('评论失败','error');
            })
        }else{
          this.rank = null;
          this.notify('请先登录','warning');
        }
      },
      // 评论列表
      getComment() {
        let _this = this;
        getAllComment(this.type,this.playId)
        .then(res => {
          console.log(res)
          this.commentList = res;
          for(let item of res) {
            _this.getUsers(item.userId);
          }
        })
        .catch(err => {
          console.log(err);
        })
      }
    }
 }
</script>
<style lang="scss" scoped>
@import '../assets/css/comment.scss';
</style>